<template>
    <deviceDetail v-if="showDetail" @updateShowDetailF="updateShowDetailF" :detailId='detailId' :deviceName="deviceName"></deviceDetail>
    <div class="deviceStatus zy-content" v-else>
        <div class="searchBox">
            <Form label-position="right" :label-width="100" class="search-form">
                <Row>
                    <Col span="5">
                        <FormItem label="所属层级：">
                            <Cascader :data="hierarchyList" v-model="value1" @on-change="pushHierarchy" change-on-select></Cascader>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="设备：">
                            <Select filterable
                                    v-model="paramsList.deviceMId"
                                    :remote-method="remoteMethod1"
                                    :loading="loading1"
                                    clearable
                                    :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="item of equipmentList" :value="item.deviceMId" :key="item.deviceMId">{{item.deviceNo +'-'+item.deviceName +'-'+item.deviceMId}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="状态：">
                            <Select v-model="paramsList.status" clearable :placeholder="`${$t('common.selectInfo')}`">
                                <Option v-for="(item,index) of statusList" :value="item.id" :key="index">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="5" align="center">
                        <RadioGroup v-model="paramsList.type">
                            <Radio label="6">当班</Radio>
                            <Radio label="4">当日</Radio>
                            <!-- <Radio label="5">近四小时</Radio> -->

                        </RadioGroup>
                    </Col>
                    <Col span="4" align="center">
                        <Button type="primary" @click="changeNum()" v-has="'dmsDeviceGetDeviceRealtimeStatus'">{{$t('common.Query')}}</Button>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="tableContent" v-if="showTable" >
            <Row :gutter="16">
                <Col :span="spanwidth" v-for="(item,index) of dataArr" class="tableCol" :key="index">
                    <div class="alltag">
                        <div class="itemHeader">
                            <div class="con">
                                <p class="name">
                                    {{item.deviceNo}}
                                </p>
                                <p class="eqnum">
                                    {{item.deviceMId}}
                                </p>
                            </div>
                            <div class="itemRow" @click="goDetail(item)" v-has="'chartState'">
                                <div class='itemyuan' :style="item.status==1? 'background:rgb(30,190,102)' : item.status==2? 'background:rgb(255,185,0)' : item.status==5? 'background:rgb(253,22,60)' : item.status==4? 'background:rgb(119,119,119)' : ''"></div>
                                <div class="imgyuan">
                                    <img src="~images/equipmentDataManagement/runing_lamp.png" v-if="item.status == 1 " alt="运行">
                                    <img src="~images/equipmentDataManagement/standby_lamp.png" v-if="item.status == 2 " alt="待机">
                                    <img src="~images/equipmentDataManagement/downtime_lamp.png" v-if="item.status == 5 " alt="告警">
                                    <img src="~images/equipmentDataManagement/shutdown_lamp.png" v-if="item.status == 4 " alt="关机">
                                </div>
                                <div class="itemfang" :style="item.status==1? 'background:rgb(30,190,102)' : item.status==2? 'background:rgb(255,185,0)' : item.status==5? 'background:rgb(253,22,60)' : item.status==4? 'background:rgb(119,119,119)' : ''">
                                    <span  @click="jumpDetail(item)" v-if="item.status == 1">运行<Icon type="ios-arrow-forward"></Icon></span>
                                    <span  @click="jumpDetail(item)" v-if="item.status == 2">待机<Icon type="ios-arrow-forward"></Icon></span>
                                    <span  @click="jumpDetail(item)" v-if="item.status == 5">告警<Icon type="ios-arrow-forward"></Icon></span>
                                    <span  @click="jumpDetail(item)" v-if="item.status == 4">关机<Icon type="ios-arrow-forward"></Icon></span>
                                </div>
                            </div>
                        </div>
                        <div class="circle">
                            <Row>
                                <Col span="12">
                                    <div :id="circle+index" class="circleSty"></div>
                                    <div class="openDiv">
                                        <span class="openrate" style="font-size:14px">开动率</span>
                                        <span class="openrate1" style="font-size:18px">{{item.startRate}}%</span>
                                    </div>
                                </Col>
                                <Col span="12" >
                                    <Col span="12" class-name="timecol">
                                        <span>{{item.runTime}}</span>
                                    </Col>
                                    <Col span="12" class-name="timecol">
                                        <span>{{item.standbyTime}}</span>
                                    </Col>
                                    <Col span="12">
                                        <span><strong class="running"></strong>运行</span>
                                    </Col>
                                    <Col span="12">
                                        <span><strong class="standby"></strong>待机</span>
                                    </Col>
                                    <Col span="12" class-name="timecol">
                                        <span>{{item.waringTime}}</span>
                                    </Col>
                                    <Col span="12" class-name="timecol">
                                        <span>{{item.shutdownTime}}</span>
                                    </Col>
                                    <Col span="12">
                                        <span><strong class="alarm"></strong>告警</span>
                                    </Col>
                                    <Col span="12">
                                        <span><strong class="close"></strong>关机</span>
                                    </Col>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
    </div>
</template>

<script>
    import deviceDetail from './deviceDetail'
    import * as echarts from 'echarts';
    // import hasDirective from '../../directives/has'
    export default {
        name: "deviceStatus",
        // directives:{
        //     has:hasDirective
        // },
        components: {deviceDetail},
        data(){
            return{
                showDetail:false,
                showTable:false,
                loading:false,
                paramsList:{
                    type:'6'
                },
                loading1:false,
                statusList:[
                    {id:1,name:'运行'},
                    {id:2,name:'待机'},
                    {id:5,name:'告警'},
                    {id:4,name:'关机'},
                ],
                equipmentList:[],
                pageNum:1,
                pageSize:18,
                total:0,
                circle:'circle',
                columns: [],
                dataArr: [],
                pageSizeOption: [18,36,54,72],
                hierarchyList:[],
                value1:[],
                detailId:'',
                deviceName:'',
                spanwidth:'4'
            }
        },
        mounted(){
            this.getHierarchy();
            this.searchList();
            this.rearrange()
            window.addEventListener('resize', () => {
                this.rearrange()
            })
        },
        methods:{
            rearrange() {
                //  窗口变化，重新排列一级菜单
                let width = document.documentElement.clientWidth || document.body.clientWidth
                if((width-247)/(24/12)<270){
                    this.spanwidth=24
                }else if((width-247)/(24/8)<270){
                    this.spanwidth=12
                }else if((width-247)/(24/6)<270){
                    this.spanwidth=8
                }else if((width-247)/(24/4)<270){
                    this.spanwidth=6
                }else{
                    this.spanwidth=4
                }
            },
            getEquipmentValue(device){
                this.axios({
                    method: 'get',
                    url: '/dms/dmsDevice/getDeviceDetail',
                    params:{
                        deviceMIdOrNo:device,
                        hierarchyCode:this.paramsList.hierarchyCode,
                    }
                }).then(res => {
                    if(res.code == 200){
                        this.equipmentList =res.data;
                    }
                })
            },
            remoteMethod1(query) {
                if (query !=='') {
                    this.loading1 = true;
                    setTimeout(() => {
                        this.loading1 = false;
                        this.getEquipmentValue(query)   //以输入的设备名去查询
                    }, 200);
                } else {
                    this.equipmentList = [];
                }
            },
            getHierarchy(){
                this.axios({
                    method: 'get',
                    url: '/basic/organization/findListByToken'
                }).then(res => {
                    if(res.code == 200){
                        this.hierarchyList = this.getHierarchyByMachining(res.data)
                    }
                })
            },
            getHierarchyByMachining(arr){
                arr.forEach((item) => {
                    item['value'] = item.id;
                    item['label'] = item.name;
                    if (item.children.length >0){
                        this.getHierarchyByMachining(item.children)
                    }
                })
                return arr;
            },
            pushHierarchy(value,selectValue){
                if(selectValue.length >0){
                    this.paramsList.hierarchyCode = selectValue[selectValue.length-1].code;
                }else{
                    this.paramsList.hierarchyCode = ''
                }
            },
            updateShowDetailF(){
                this.showDetail = false
                this.$nextTick(()=>{
                    for(let i =0;i<this.dataArr.length;i++){
                        this.setCircleOption(i,this.dataArr[i].startRate)
                    }
                })
            },
            setCircleOption(item,rate){
                let myChart = echarts.init(document.getElementById("circle"+item));
                myChart.setOption({
                    series: [{
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 10,
                        },
                        axisLine: {
                            lineStyle: {
                                width: -7,
                                opacity:1,
                            }
                        },
                        pointer: {
                            width: 4,
                            length: '70%',
                        },
                        splitLine: {
                            distance: -10,
                            length: 10,
                            lineStyle: {
                            color: '#fff',
                            width: 4
                        }},
                        axisLabel: {
                            distance: 20,
                            formatter: function () {
                                return '';
                            }
                        },
                        detail: {
                            width: 0,
                            height: 0,
                            show:false,
                        },
                        data: [{value: rate}]
                    }]
                });
                window.addEventListener("resize", function () {
                    myChart.resize(); //myChart指自己定义的echartsDom对象
                });
            },
            jumpDetail(){

            },
            goDetail(item){
                this.showDetail=true
                this.detailId = item.deviceId
                this.deviceName = item.deviceNo
            },
            changeNum(){
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val){
                this.pageNum = val;
                this.searchList();
            },
            searchList(){//查询列表
                this.showTable = false
                let params = {
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                };
                for (let key in this.paramsList) {
                  if (this.paramsList[key]) {
                    this.$set(params, key, this.paramsList[key])
                  }
                }

                this.axios({
                    method: 'get',
                    url: '/dms/dmsDevice/getDeviceRealtimeStatus',
                    params: params
                }).then(res => {
                    if(res.code === 200){
                       this.dataArr = res.data.list
                       this.total = res.data.total
                       this.showTable = true
                       this.$nextTick(()=>{
                           for(let i =0;i<this.dataArr.length;i++){
                                this.setCircleOption(i,this.dataArr[i].startRate)
                            }
                       })

                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .deviceStatus{
        .searchBox{
            .search-form{
                .fang{
                    width: 15px;
                    height: 15px;
                    background: #000;
                    float: left;
                    line-height: 16px;
                    font-size:16px;
                    margin-right: 20px;
                    span{
                        position:relative;
                        top: 20px;
                    }
                }
            }
        }
        .tableContent{
            padding-top: 20px;
            .tableCol{
                margin-bottom: 15px;
                .alltag{
                    background: #fff;
                    .itemHeader{
                        .itemRow{
                            cursor: pointer;
                            display:flex;
                            justify-content:right;
                            align-items:center;
                            .itemyuan{
                                width: 18px;
                                height: 36px;
                                // background-color: blue;
                                border-radius: 100% 0 0 100%/50%;
                            }
                            .imgyuan{
                                position:absolute;
                                right: 62px;
                                width: 34px;
                                height: 34px;
                                background-color: rgb(255, 255, 255);
                                border-radius: 34px;
                                img{
                                    padding: 5px;
                                    width: 34px;
                                    height: 34px;
                                }
                            }
                            .itemfang{
                                width: 72px;
                                height: 36px;
                                // background-color: blue;
                                span{
                                    font-size: 14px;
                                    line-height:36px;
                                    padding-left:25px;
                                    color: #fff;
                                }
                            }
                        }

                    height: 65px;
                    padding: 15px 0 0 10px;
                    .con{
                        position: absolute;
                        .name{
                            font-size: 16px;
                            font-weight: bold;
                        }
                        .eqnum{
                            font-size: 14px;
                        }
                    }
                }
                    .title{
                        padding-left: 10px;
                        font-size: 16px;
                        height: 40px;
                        line-height: 40px;
                        // color: #fff;
                        .yuan{
                            position:absolute;
                            top:0;
                            right: 5%;
                            width: 40px;
                            height: 40px;
                            // border: 1px solid salmon;
                            background-color: #fff;
                            border-radius: 50%;
                            /*border-radius: 100%;*/
                            img{
                                width: 40px;
                                height: 38px;
                            }
                        }
                    }
                    .circle{
                        margin: 0 10px;
                        // padding-top: 10px;
                        border-top:  solid 1px #dddddd;
                        .timecol{
                            margin-top: 25px;
                        }
                        strong{
                            width: 8px;
                            height: 8px;
                            display: inline-block;
                            border-radius: 50%;
                            margin-right: 15px;
                        }
                        .close{
                            background: #777777;
                        }
                        .alarm{
                            background: #f96e85;
                        }
                        .standby{
                            background: #fab638;
                        }
                        .running{
                            background: #2bd2b5;
                        }
                        .circleSty{
                            position: relative;
                            width: 100%;
                            height: 100px;
                        }
                        .openDiv{
                            display:flex;
                            justify-content:center;
                            align-items: center;
                            flex-direction: column;
                            .openrate{
                                font-size: 12px;
                            }
                            .openrate1{
                                font-size: 16px;
                                font-weight: bold;
                            }
                        }

                    }
                }
            }
        }
    }
</style>

<style lang="scss">

</style>
